<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    *{
      padding: 0;
      margin: 0;
    }

    body{
      background: black;
    }

    ul,li{
      list-style: none;
    }

    .wrap{
      width: 1000px;
      margin: 200px auto;
      background: white;
    }

    .title{
      width: 100%;
      height: 60px;
      border-bottom: 1px solid #ccc;
      position: relative;
    }

    .clearfix::after{
      content: " ";
      display: block;
      clear: both;
      height: 0;
      overflow: hidden;
    }

    .title .left {
      float: left;
      font-size: 20px;
      color: #444;
      width: 80px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      margin-left: 30px;
      /* background: pink; */
    }

    .left::after{
      content: "";
      width: 80px;
      height: 2px;
      left: 0;
      bottom: 0;
      margin-left: 30px;
     background:  rgb(43, 172, 107);
     position: absolute;

    }

    .title .right{
      float: right;
      font-size: 14px;
      color: #fff;
      width: 60px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin-top: 15px;
      margin-right: 30px;
      background: rgb(43, 172, 107);
      border-radius: 4px;
    }

    .list-items{
      width: 250px;
      float: left;
      margin-top: 30px;
      margin-right: 30px;
    }
    .list-items span{
      display: block;
      width: 250px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 14px;
      color: #626675;
    }

    .list-items:nth-child(1),
    .list-items:nth-child(4){
      margin-left: 95px;
    }

    /* .list-items:nth-child(1),
    .list-items:nth-child(2),
    .list-items:nth-child(4),
    .list-items:nth-child(5){
      margin-right:30px;
    } */
  </style>
</head>
<body>
  <div class="wrap">
    <div class="title clearfix">
      <div class="left">书籍推荐</div>
      <div class="right">全部</div>
    </div>
    <ul class="list clearfix">
      <li class="list-items">
        <img width="250px" height="150px" src="https://img2.baidu.com/it/u=3413356740,4265437493&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=321" alt="图片加载失败啦">
        <span>精绝古城</span>
      </li>
      <li class="list-items">
        <img width="250px" height="150px" src="https://img2.baidu.com/it/u=65005893,3878670878&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=265" alt="图片加载失败啦">
        <span>龙岭迷窟</span>
      </li>
      <li class="list-items">
        <img width="250px" height="150px" src="https://img0.baidu.com/it/u=2846869551,1790924773&fm=253&fmt=auto&app=120&f=JPEG?w=650&h=390" alt="图片加载失败啦">
        <span>云南虫谷</span>
      </li>
      <li class="list-items">
        <img width="250px" height="150px" src="https://img0.baidu.com/it/u=710746330,1169377854&fm=253&fmt=auto&app=138&f=PNG?w=500&h=254" alt="图片加载失败啦">
        <span>昆仑神宫</span>
      </li>
      <li class="list-items">
        <img width="250px" height="150px" src="https://img0.baidu.com/it/u=282978893,3598172676&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=352" alt="图片加载失败啦">
        <span>黄皮子坟</span>
      </li>
      <li class="list-items">
        <img width="250px" height="150px" src="https://img1.baidu.com/it/u=858434626,2932232010&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="图片加载失败啦">
        <span>怒晴湘西</span>
      </li>
    </ul>
  </div>
</body>
</html>